<template>
  <div class="index">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="team">
          <div class="powertop">
            <div class="powertopcon">
              <div  class="powertopli"  >店铺信息</div>
            </div>
          </div>
        </div>
        <div class="con">
          <div class="t_search_box">
            <el-input style="width: 370px;" class="t_search_input" v-model.trim="searchform.number" placeholder="输入领取手机号码"></el-input>
            <el-select style="margin-left: 10px;margin-right: 10px;" clearable  v-model="searchform.qytype" placeholder="选择领取权益">
              <el-option label="爱奇艺" value="爱奇艺"></el-option>
              <el-option label="腾讯" value="腾讯"></el-option>
              <el-option label="优酷" value="优酷"></el-option>
            </el-select>
            <el-button type="danger" style="background-color: #2974FF;" @click="adddengji" >领取登记</el-button>
            <el-button type="danger" style="background-color: #2974FF;" @click="searchbtn" >查询</el-button>
            <div style="margin-top: 30px;display: flex;">
              <el-button @click="daochu(0)"  type="danger" style="background-color: #2974FF;"  >导出待办</el-button>
              <el-button @click="daochu(1)"  type="danger"  style="background-color: #2974FF;" :loading="isloadquan" >
                <span v-if="isloadquan">请耐心等待</span>
                <span v-else>导出全量领取信息</span>
                
              </el-button>
              <router-link to="/quanyi/quanyishangpin" style="margin-left: 10px;margin-right: 10px;"><el-button     plain >设置赠送商品</el-button></router-link>
              
              <upload-excel-component class="t_dr_btn"  @on-selected-file="exportData" buttonName="导入办理结果">
								</upload-excel-component>
                <el-button type="text" style="margin-left: 10px;" @click="xiazai">下载模板</el-button>
            </div>
          </div>
          <div>
            <el-table
            :header-cell-style="{ 
            background:'#F4F4F4',
            color:'#7D8087'}"
              :data="tableData"
              style="width: 100%;margin-top: 20px;">
              <el-table-column
                prop="mobile"
                align="center"
                label="手机号码">
              </el-table-column>
              <el-table-column
                prop="created_at"
                align="center"
                label="申请时间">
              </el-table-column>
              <el-table-column
                prop="gift"
                align="center"
                label="申请权益">
              </el-table-column>
              <el-table-column
                prop="states"
                align="center"
                label="领取结果">
                <!-- <template slot-scope="scope">
                  <span v-if="scope.row.state==100">申请中</span>
                  <span v-if="scope.row.state==200">办理中</span>
                  <span v-if="scope.row.state==300">已到账</span>
                  <span v-if="scope.row.state==-400">到账失败</span>
                </template> -->
              </el-table-column>
              <el-table-column
                prop="finish_at"
                align="center"
                label="到账时间">
              </el-table-column>
              <el-table-column
                prop="remark"
                align="center"
                label="失败原因">
              </el-table-column>
            </el-table>
            <div style="text-align: right;margin-top: 20px;">
              <el-pagination
                @current-change="changepage"
                background
                :page-size="searchform.pageSize"
                layout="total,prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 成功 -->
    <el-dialog
      title="登记成功"
      :visible.sync="successdialog"
      center="true"
      width="500px">
      <div style="text-align: center;color: #FF0000;">
        该账号符合领取条件，已成功登记
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" style="background-color: #2974FF;" round @click="successdialog = false">确 定</el-button>
      </span>
    </el-dialog>
     <!-- 失败 -->
     <el-dialog
      title="领取失败"
      :visible.sync="faildialog"
      center="true"
      width="500px">
      <div style="text-align: left;color: #FF0000;width: 400px;margin-left: auto;margin-right: auto;">
        {{ failmsg }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" style="background-color: #2974FF;" round @click="faildialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导入结果 -->
    <el-dialog
      title="导入结果"
      :visible.sync="daorures"
      center="true"
      width="500px">
      <div style="text-align: center;color: #FF0000;width: 400px;margin-left: auto;margin-right: auto;">
        <div>
          <div style="color: #67C23A;">成功数量：{{ successnum }}</div>
        </div>
        <div v-if="failed.length!=0">
          失败原因：{{ failed.toString() }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" style="background-color: #2974FF;" round @click="daorures = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import robot from '@/components/robot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index3.vue";

  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      "robot":robot,
      UploadExcelComponent
    },
    name: 'quanyi',
    data() {
      return {
        
        shopid:'',
        searchform:{
          number:'',
          qytype:'',
          page:1,
          pageSize:20
        },
        tableData: [],
          successdialog:false,
          faildialog:false,
          failmsg:'',
          total:1000,
          daorures:false,
          successnum:0,
          failed:[],
          isloadquan:false


      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      //列表
      this.getlist()
     
    },
    methods: {
      //登记
      adddengji(){
          if(this.searchform.number==''){
            this.$message.error('请填写电话');
            return
          }
          if(this.searchform.qytype==''){
            this.$message.error('请选择权益');
            return
          }

          axios.post('/api/plan-market/goods/gift/record/add',{
            mobile:this.searchform.number,
            gift:this.searchform.qytype,
          })
          .then((response) => {
            if (response.data.msg.code == 0) {
              //成功
              this.successdialog = true
             
              //清空数据
              this.searchform.number=''
              this.searchform.qytype=''

              this.getlist()
            }else {
                //失败
                this.failmsg = response.data.msg.info
                this.faildialog = true
                //清空数据
                this.searchform.number=''
                this.searchform.qytype=''
                this.getlist()
            }
          })
      },
      //搜索
      searchbtn(){
        this.searchform.page = 1
        //列表
        this.getlist()
      },
      //列表
      getlist(){
        axios.get('/api/plan-market/goods/gift/record/get',{
          params:{
            mobile:this.searchform.number,
            page:this.searchform.page,
            pageSize:this.searchform.pageSize,
          }
        })
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log('列表')
              console.log(response)
              this.tableData = response.data.data.data
              this.total = response.data.data.total
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      changepage(val){
        console.log(val)
        this.searchform.page = val
        this.getlist()
      },
      daochu:function(type){
        if(type==1){
          this.isloadquan = true
        }
        // window.location.href = '/storage/exports/20231010170342店铺50481全量领取权益导出订单.csv'
        axios.post('/api/plan-market/goods/gift/record/export',{
          is_all:type
        })
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log(response.data.data)
              this.isloadquan = false
              window.location.href = response.data.data

              // console.log('http://118.190.155.55'+response.data.data)

            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //下载模板
      xiazai:function(){
				const a = document.createElement('a');
				a.setAttribute('download', '办理结果.xlsx');
				a.setAttribute('href', window.location.origin+window.location.pathname+'static/banlijieguo.xlsx');
				a.click();
			},
      //导入
      exportData(data) {
       
				var that = this
				let list = []
					for (var i = 0; i < data.results.length; i++) {
						var obj = {}
            if(!data.results[i]['*手机号']){
              this.$message.error('请填写手机号');
              return
            }
						obj['mobile'] = data.results[i]['*手机号']
						obj['finish_at'] = data.results[i]['到账时间']
						obj['remark'] = data.results[i]['失败原因']
						list.push(obj)
					}
          console.log(list)
					
					axios.post("/api/plan-market/goods/gift/record/import", {
							data: list
						})
						.then(function(response) {
							if (response.data.msg.code == 0) {
                that.successnum = response.data.data.success
                that.failed = response.data.data.failed
                that.daorures = true
                // if(response.data.data.failed.length==0){
                //   that.$message({
                //     message: '操作成功',
                //     type: 'success'
                //   });
                // }else{
                //   that.$message.error(response.data.data.failed.toString());
                // }
								
								that.getlist();
							} else {
								that.$message.error(response.data.msg.info);
							}
						})

			},
    },
    beforeDestroy(){
     
    },
    
    
  }
</script>

<style  scoped>

    .t_dr_btn{
        text-align: center;
        width: 160px;
        background-color:#2974FF;
        border-radius: 4px;
    }
    /deep/ .t_dr_btn .el-button--text{
      color: white;
    }

    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .powertopcon {
      display: flex;
      width: 800px;
    }
    .t_jqr_box{
      background-color: #007EFF;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 160px;
      margin-right: 30px;
      border-radius: 3px;
      cursor: pointer;

    }
    .powertopli {
      width: 180px;
      line-height: 50px;
      border-bottom: 3px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #F9F9F9 solid;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }

    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
      color:#2974FF ;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }
    .con {
				padding: 20px ;
    }
    .t_overtips{
      width: 100%;
      overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
      text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
      white-space: nowrap;     /*文本不换行*/
    }
    .t_tongji_box{
      background-color: rgb(241, 241, 241);
      padding: 16px 30px;
      box-sizing: border-box;
      /* font-size: 18px; */
      display: flex;
      color: #515151;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .t_title_box{
      display: flex;
      align-items: center;
      color: #525252;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .t_red_g{
      background-color: #2974FF;
      width: 4px;
      height: 16px;
      margin-right: 10px;
    }
    .t_red_time{
      color: #2974FF;
    }
    .t_search_input{
      width: 191px;
      margin-bottom: 5px;
    }
    /* .t_search_box{
      display: flex;
      flex-wrap: wrap;
    } */
    /deep/.t_search_box .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-input__inner{
      background-color: #f7f8fa;
      border: none;
      
    }

  
</style>
